<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕课书评网</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="/ssm/resources/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="/ssm/resources/raty/lib/jquery.raty.css">
    <script src="/ssm/resources/jquery.3.3.1.min.js"></script>
    <script src="/ssm/resources/bootstrap/bootstrap.min.js"></script>
    <script src="/ssm/resources/art-template.js"></script>
    <script src="/ssm/resources/raty/lib/jquery.raty.js"></script>

    <style>
        .highlight {
            color: red !important;
        }

        a:active {
            text-decoration: none !important;
        }
    </style>


    <style>
        .container {
            padding: 0px;
            margin: 0px;
        }

        .row {
            padding: 0px;
            margin: 0px;
        }

        .col- * {
            padding: 0px;
        }
    </style>
    <script>
        $.fn.raty.defaults.path = "/ssm/resources/raty/lib/images"
    </script>
    <script type="text/html" id="books_tlp">
        <a href="/ssm/book/{{book.bookId}}" style="color: inherit">
            <div class="row mt-2 book">
                <div class="col-4 mb-2 pr-2">
                    <img class="img-fluid" src="{{book.cover}}">
                </div>
                <div class="col-8  mb-2 pl-0">
                    <h5 class="text-truncate">{{book.bookName}}</h5>

                    <div class="mb-2 bg-light small  p-2 w-100 text-truncate">{{book.author}}</div>


                    <div class="mb-2 w-100">{{book.subTitle}}</div>

                    <p>
                        <span class="stars" data-score="{{book.evaluationScore}}" title="gorgeous"></span>
                        <span class="mt-2 ml-2">{{book.evaluationScore}}</span>
                        <span class="mt-2 ml-2">{{book.evaluationQuantity}}人已评</span>
                    </p>
                </div>
            </div>
        </a>
        <hr>
    </script>


    <script>
        /*
        * 在这里我们封装了一个loadMore的函数
        * loadMore()加载数据
        * flag设置为true的时候，代表的是从第一页开始加载数据，查询数据
        * flag设置为false的时候，代表的是按照nextPage从下一页开始查询。查询后续页。
        * */
        function loadMore(flag) {
            if (flag === true) {
                $("#bookList").html("");
                $("#nextPage").val(1);
            }
            var nextPage = $("#nextPage").val();
            var categoryId = $("#categoryId").val();
            var order = $("#order").val();

            $.ajax({
                url: '/ssm/books',
                data: {"page": nextPage,"categoryId":categoryId,"order":order},
                data_type: 'json',
                type: 'get',
                success: function (msg) {
                    var book_json = msg.records;
                    for (let i = 0; i < book_json.length; i++) {
                        let book = msg.records[i];
                        var html = template('books_tlp', {book: book});
                        $("#bookList").append(html);
                    }
                    // 显示星星评价组件
                    $('.stars').raty({readOnly: true});

                    // alert(msg.current+" "+msg.pages)
                    // 判断是否为最后一页
                    if (msg.current < msg.pages) {
                        $("#nextPage").val(parseInt(msg.current) + 1);
                        $("#btnMore").show();
                        $("#divNoMore").hide();
                    } else {
                        $("#divNoMore").show();
                        $("#btnMore").hide();
                    }
                }
            });
        }
    </script>
    <#--下面写的代码是有点的多余，因为有比较多的重复的部分，因此在这里我们使用函数将下面的代码进行封装-->

    <script>
        $(function () {
            // $.ajax({
            //     url: "/ssm/books",
            //     data: {page: 1},
            //     type: "get",
            //     data_type: "json",
            //     success: function (msg) {
            //         console.log(msg);
            //         var book_json = msg.records;
            //         for (let i = 0; i < book_json.length; i++) {
            //             var book = msg.records[i];
            //             var html = template('books_tlp', {book: book});
            //             $("#bookList").append(html);
            //         }
            //         // 显示星星评价组件
            //         $('.stars').raty({readOnly: true});
            //     }
            // });
            loadMore(true);
        });
    </script>


    <script>
        $(function () {
            $("#btnMore").click(function () {
                loadMore(false);
            });
            /*
            * 在这里我们开始做样式的变化和调整。点击什么，这个标签就是高亮的显示出来
            * */
            // 在页面加载结束之后我们这里开始做我们的高亮的显示和实现的操作
            $(".category").click(function(){
                $(".category").removeClass("highlight");
                $(".category").addClass("text-black-50");
                $(this).addClass("highlight");
                var categoryId = $(this).data("category");
                $("#categoryId").val(categoryId);
                loadMore(true);
            });
            $(".order").click(function () {
                $(".order").removeClass("highlight");
                $(".order").addClass("text-black-50");
                $(this).addClass("highlight");
                var order = $(this).data("order");
                $("#order").val(order);
                loadMore(true);
            });
        });


    </script>


</head>
<body>
<div class="container">
    <nav class="navbar navbar-light bg-white shadow mr-auto">
        <ul class="nav">
            <li class="nav-item">
                <a href="/ssm/">
                    <img src="https://m.imooc.com/static/wap/static/common/img/logo2.png" class="mt-1"
                         style="width: 100px">
                </a>
            </li>

        </ul>
        <#if member??>
            <h6 class="mt-1">
                <img style="width: 2rem;margin-top: -5px" class="mr-1" src="/ssm/images/user_icon.png">${member.nickName}
            </h6>
            <#else>
                <a href="/ssm/login.html" class="btn btn-light btn-sm">
                    <img style="width: 2rem;margin-top: -5px" class="mr-1" src="/ssm/images/user_icon.png">登录
                </a>
        </#if>

    </nav>
    <div class="row mt-2">


        <div class="col-8 mt-2">
            <h4>热评好书推荐</h4>
        </div>

        <div class="col-8 mt-2">
            <span data-category="-1" style="cursor: pointer" class="highlight  font-weight-bold category">全部</span>
            |
            <#list categoryList as category>
                <a style="cursor: pointer" data-category="${category.categoryId}"
                   class="text-black-50 font-weight-bold category">${category.categoryName}</a>
                <#if category_has_next>|</#if>
            </#list>
        </div>

        <div class="col-8 mt-2">
            <span data-order="quantity" style="cursor: pointer"
                  class="order highlight  font-weight-bold mr-3">按热度</span>

            <span data-order="score" style="cursor: pointer"
                  class="order text-black-50 mr-3 font-weight-bold">按评分</span>
        </div>
    </div>
    <div class="d-none">
        <#--这个隐藏标签的作用是用来处理加载后续页面的。-->
        <input type="hidden" id="nextPage" value="2">
        <#--这个隐藏标签的作用就是表明我们分类的时候默认是全部，然后默认的按照数量和热度来排序-->
        <input type="hidden" id="categoryId" value="-1">
        <input type="hidden" id="order" value="quantity">
    </div>

    <div id="bookList">
    </div>
    <button type="button" id="btnMore" data-next-page="1" class="mb-5 btn btn-outline-primary btn-lg btn-block">
        点击加载更多...
    </button>
    <div id="divNoMore" class="text-center text-black-50 mb-5" style="display: none;">没有其他数据了</div>
</div>

</body>
</html>